<template>
  <vab-card class="trend" shadow="hover" skeleton>
    <template #header>
      <span>
        <vab-icon icon="line-chart-fill" />
        趋势
      </span>
    </template>
    <vab-chart
      class="trend-echart"
      :init-options="initOptions"
      :option="option"
      theme="vab-echarts-theme"
    />
  </vab-card>
</template>

<script>
  import VabChart from '@/plugins/VabChart'

  export default defineComponent({
    components: {
      VabChart,
    },
    props: {
      trend: {
        type: Array,
        default: () => {
          return []
        },
      },
      xAxis: {
        type: Array,
        default: () => {
          return []
        },
      },
    },

    setup() {
      const state = reactive({
        initOptions: {
          renderer: 'svg',
        },
        option: {
          tooltip: {
            trigger: 'axis',
            extraCssText: 'z-index:1',
          },
          grid: {
            top: '4%',
            left: '2%',
            right: '2%',
            bottom: '0%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              data: [],
              boundaryGap: false,
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [],
        },
      })

      const init = (trend, xAxis) => {
        state.option.series = trend
        state.option.xAxis[0].data = xAxis
      }

      // watch: {
      //   trend: {
      //     handler(val) {
      //       state.option.series = val
      //       console.log(state.option)
      //     },
      //     deep: true,
      //   },
      //   xAxis: {
      //     handler(val) {
      //       state.option.xAxis[0].data = val
      //     },
      //     deep: true,
      //   },
      // },

      return {
        ...toRefs(state),
        init,
      }
    },
  })
</script>
